<h1 class="page_title">
    表格 </h1>
<h2>
    table Tiny-ui默认 </h2>
<div class="codeView bs-docs-example ">
    <table class="table  "
            >
        <thead>
        <tr>
            <th>表头</th>
            <th>表头</th>
            <th>表头</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <th>类别</th>
            <td>表格内容</td>
            <td>表格内容</td>
        </tr>
        <tr>
            <th>类别</th>
            <td>表格内容</td>
            <td>表格内容</td>
        </tr>
        <tr>
            <th>类别</th>
            <td>表格内容</td>
            <td>表格内容</td>
        </tr>
        </tbody>
    </table>
</div>
<h2>
    table-border 带水平线 </h2>
<div class="codeView bs-docs-example ">
    <table class="table table-border ">
        <thead>
        <tr>
            <th>表头</th>
            <th>表头</th>
            <th>表头</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <th>类别</th>
            <td>表格内容</td>
            <td>表格内容</td>
        </tr>
        <tr>
            <th>类别</th>
            <td>表格内容</td>
            <td>表格内容</td>
        </tr>
        <tr>
            <th>类别</th>
            <td>表格内容</td>
            <td>表格内容</td>
        </tr>
        </tbody>
    </table>
</div>
<h2>
    table-bg th带背景 </h2>
<div class="codeView bs-docs-example ">
    <table class="table table-border table-bg ">
        <thead>
        <tr>
            <th>表头</th>
            <th>表头</th>
            <th>表头</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <th>类别</th>
            <td>表格内容</td>
            <td>表格内容</td>
        </tr>
        <tr>
            <th>类别</th>
            <td>表格内容</td>
            <td>表格内容</td>
        </tr>
        <tr>
            <th>类别</th>
            <td>表格内容</td>
            <td>表格内容</td>
        </tr>
        </tbody>
    </table>
</div>
<h2>
    table-bordered 带外边框 </h2>
<div class="codeView bs-docs-example ">
    <table class="table table-bordered ">
        <thead>
        <tr>
            <th>表头</th>
            <th>表头</th>
            <th>表头</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <th>类别</th>
            <td>表格内容</td>
            <td>表格内容</td>
        </tr>
        <tr>
            <th>类别</th>
            <td>表格内容</td>
            <td>表格内容</td>
        </tr>
        <tr>
            <th>类别</th>
            <td>表格内容</td>
            <td>表格内容</td>
        </tr>
        </tbody>
    </table>
</div>
<h2>
    radius 圆角 </h2>
<div class="codeView bs-docs-example ">
    <table class="table table-bordered radius ">
        <thead>
        <tr>
            <th>表头</th>
            <th>表头</th>
            <th>表头</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <th>类别</th>
            <td>表格内容</td>
            <td>表格内容</td>
        </tr>
        <tr>
            <th>类别</th>
            <td>表格内容</td>
            <td>表格内容</td>
        </tr>
        <tr>
            <th>类别</th>
            <td>表格内容</td>
            <td>表格内容</td>
        </tr>
        </tbody>
    </table>
</div>
<h2>
    table-striped 奇数行背景设为浅灰色 </h2>
<div class="codeView bs-docs-example ">
    <table class="table table-bordered table-striped ">
        <thead>
        <tr>
            <th>表头</th>
            <th>表头</th>
            <th>表头</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <th>类别</th>
            <td>表格内容</td>
            <td>表格内容</td>
        </tr>
        <tr>
            <th>类别</th>
            <td>表格内容</td>
            <td>表格内容</td>
        </tr>
        <tr>
            <th>类别</th>
            <td>表格内容</td>
            <td>表格内容</td>
        </tr>
        </tbody>
    </table>
</div>
<h2>
    table-hover 鼠标悬停样式 </h2>
<div class="codeView bs-docs-example ">
    <table class="table table-bordered table-hover ">
        <thead>
        <tr>
            <th>表头</th>
            <th>表头</th>
            <th>表头</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <th>类别</th>
            <td>表格内容</td>
            <td>表格内容</td>
        </tr>
        <tr>
            <th>类别</th>
            <td>表格内容</td>
            <td>表格内容</td>
        </tr>
        <tr>
            <th>类别</th>
            <td>表格内容</td>
            <td>表格内容</td>
        </tr>
        </tbody>
    </table>
</div>
<h2>
    定义颜色 </h2>
<div class="codeView bs-docs-example ">
    <table class="table table-border table-bg ">
        <thead>
        <tr>
            <th style="width:20%">Class</th>
            <th>描述</th>
        </tr>
        </thead>
        <tbody>
        <tr class="active ">
            <th>.active</th>
            <td>悬停在行</td>
        </tr>
        <tr class="success ">
            <th>.success</th>
            <td>成功或积极</td>
        </tr>
        <tr class="warning ">
            <th>.warning</th>
            <td>警告或出错</td>
        </tr>
        <tr class="danger ">
            <th>.danger</th>
            <td>危险</td>
        </tr>
        </tbody>
    </table>
</div>
<h2>
    对齐方式 </h2>
<div class="codeView bs-docs-example ">
    <table class="table table-border table-bordered ">
        <thead class="text-c ">
        <tr>
            <th>对齐方式</th>
            <th>类名</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>居左</td>
            <td>默认</td>
        </tr>
        <tr class="text-c ">
            <td>居中</td>
            <td>.text-c</td>
        </tr>
        <tr class="text-r ">
            <td>居右</td>
            <td>.text-r</td>
        </tr>
        </tbody>
    </table>
</div>
<h2>
    10 DataTables数据表格 </h2>
<div class="codeView bs-docs-example ">
    <script type="text/javascript">
        $(document).ready(function () {
            $('#example').dataTable({
                "bSort": true,
                "aoColumnDefs": [
                    {"bSortable": false, "aTargets": "unsortable"}
                ],
                "fnDrawCallback": function () {
                    $(".paginate_button").on("click", function () {
                        $("#example tr").removeClass("selected");
                        $("#example input:checkbox").prop("checked", false);
                    });
                }
            });
        });
    </script>
    <div class="dataTablebox ">
        <header>
	     	        <span class="widget-icon">
             			<i class="fa fa-table ">
                        </i>
     	    </span>
            标准数据表
        </header>
        <table id="example" class="table display " width="100%" cellspacing="0">
            <div class="toolbarInfos">
			 <span class="l">
			 					    <p id="btnBox_sty">
                                        <a class="btn  btn btn-danger"
                                                >
                                            <i class="fa fa-gear">
                                            </i>
                                            按钮 <i>
                                        </i>
                                        </a>
                                        <a class="btn  btn radius btn-info"
                                                >
                                            <i class="fa fa-gear">
                                            </i>
                                            按钮 <i>
                                        </i>
                                        </a>
                                    </p>
						  </span>
            </div>
            <thead>
            <tr>
                <th class="unsortable" style="width:6"><input type="checkbox" name="allck" value=""></th>
                <th>名称</th>
                <th class="unsortable">城市</th>
                <th>办公室</th>
                <th>年龄</th>
                <th>就职日期</th>
                <th>薪资</th>
                <th class="unsortable">操作</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td><input type="checkbox" value="1" name=""></td>
                <td>习近平</td>
                <td>北京</td>
                <td>中南海</td>
                <td>67</td>
                <td>2013/03/25</td>
                <td>￥320,800</td>
                <td><a title="编辑" modal-title="编辑" class="ml-5" data-target="#myModal" data-toggle="modal" data-height="448"
                       data-width="504" href="/static/ajax/user-add.html" style="text-decoration:none"><i class="icon-edit"></i></a>
                    <a title="删除" href="javascript:;" style="text-decoration:none" class="ml-5 delBtn">
                        <i class="icon-trash"></i></a>
                </td>
            </tr>
            <tr>
                <td><input type="checkbox" value="1" name=""></td>
                <td>张德江</td>
                <td>北京</td>
                <td>中南海</td>
                <td>69</td>
                <td>2013/03/25</td>
                <td>￥320,600</td>
                <td><a title="编辑" modal-title="编辑" class="ml-5" data-target="#myModal" data-toggle="modal" data-height="290"
                       data-width="504" href="/static/ajax/user-add.html" style="text-decoration:none"><i class="icon-edit"></i></a>
                    <a title="删除" href="javascript:;" style="text-decoration:none" class="ml-5 delBtn">
                        <i class="icon-trash"></i></a>
                </td>
            </tr>
            <tr>
                <td><input type="checkbox" value="1" name=""></td>
                <td>李克强</td>
                <td>北京</td>
                <td>中南海</td>
                <td>66</td>
                <td>2013/03/25</td>
                <td>￥310,800</td>
                <td><a title="编辑" modal-title="编辑" class="ml-5" data-target="#myModal" data-toggle="modal" data-height="290"
                       data-width="504" href="/static/ajax/user-add.html" style="text-decoration:none"><i class="icon-edit"></i></a>
                    <a title="删除" href="javascript:;" style="text-decoration:none" class="ml-5 delBtn">
                        <i class="icon-trash"></i></a>
                </td>
            </tr>
            <tr>
                <td><input type="checkbox" value="1" name=""></td>
                <td>刘云山</td>
                <td>北京</td>
                <td>中南海</td>
                <td>68</td>
                <td>2013/03/25</td>
                <td>￥310,800</td>
                <td><a title="编辑" modal-title="编辑" class="ml-5" data-target="#myModal" data-toggle="modal" data-height="290"
                       data-width="504" href="/static/ajax/user-add.html" style="text-decoration:none"><i class="icon-edit"></i></a>
                    <a title="删除" href="javascript:;" style="text-decoration:none" class="ml-5 delBtn">
                        <i class="icon-trash"></i></a>
                </td>
            </tr>
            <tr>
                <td><input type="checkbox" value="1" name=""></td>
                <td>刘云山</td>
                <td>北京</td>
                <td>中南海</td>
                <td>71</td>
                <td>2013/03/25</td>
                <td>￥300,800</td>
                <td><a title="编辑" modal-title="编辑" class="ml-5" data-target="#myModal" data-toggle="modal" data-height="290"
                       data-width="504" href="/static/ajax/user-add.html" style="text-decoration:none"><i class="icon-edit"></i></a>
                    <a title="删除" href="javascript:;" style="text-decoration:none" class="ml-5 delBtn">
                        <i class="icon-trash"></i></a>
                </td>
            </tr>
            <tr>
                <td><input type="checkbox" value="1" name=""></td>
                <td>俞正声</td>
                <td>北京</td>
                <td>中南海</td>
                <td>69</td>
                <td>2013/03/25</td>
                <td>￥300,600</td>
                <td><a title="编辑" modal-title="编辑" class="ml-5" data-target="#myModal" data-toggle="modal" data-height="290"
                       data-width="504" href="/static/ajax/user-add.html" style="text-decoration:none"><i class="icon-edit"></i></a>
                    <a title="删除" href="javascript:;" style="text-decoration:none" class="ml-5 delBtn">
                        <i class="icon-trash"></i></a>
                </td>
            </tr>
            <tr>
                <td><input type="checkbox" value="1" name=""></td>
                <td>王岐山</td>
                <td>北京</td>
                <td>中南海</td>
                <td>68</td>
                <td>2013/03/25</td>
                <td>￥290,800</td>
                <td><a title="编辑" modal-title="编辑" class="ml-5" data-target="#myModal" data-toggle="modal" data-height="290"
                       data-width="504" href="/static/ajax/user-add.html" style="text-decoration:none"><i class="icon-edit"></i></a>
                    <a title="删除" href="javascript:;" style="text-decoration:none" class="ml-5 delBtn">
                        <i class="icon-trash"></i></a>
                </td>
            </tr>
            <tr>
                <td><input type="checkbox" value="1" name=""></td>
                <td>张高丽</td>
                <td>北京</td>
                <td>中南海</td>
                <td>68</td>
                <td>2013/03/25</td>
                <td>￥290,300</td>
                <td><a title="编辑" modal-title="编辑" class="ml-5" data-target="#myModal" data-toggle="modal" data-height="290"
                       data-width="504" href="/static/ajax/user-add.html" style="text-decoration:none"><i class="icon-edit"></i></a>
                    <a title="删除" href="javascript:;" style="text-decoration:none" class="ml-5 delBtn">
                        <i class="icon-trash"></i></a>
                </td>
            </tr>
            <tr>
                <td><input type="checkbox" value="1" name=""></td>
                <td>李源潮</td>
                <td>北京</td>
                <td>中南海</td>
                <td>62</td>
                <td>2013/03/25</td>
                <td>￥280,800</td>
                <td><a title="编辑" modal-title="编辑" class="ml-5" data-target="#myModal" data-toggle="modal" data-height="290"
                       data-width="504" href="/static/ajax/user-add.htmlt" style="text-decoration:none"><i class="icon-edit"></i></a>
                    <a title="删除" href="javascript:;" style="text-decoration:none" class="ml-5 delBtn">
                        <i class="icon-trash"></i></a>
                </td>
            </tr>
            <tr>
                <td><input type="checkbox" value="1" name=""></td>
                <td>范长龙</td>
                <td>北京</td>
                <td>中南海</td>
                <td>68</td>
                <td>2013/03/25</td>
                <td>￥260,800</td>
                <td><a title="编辑" modal-title="编辑" class="ml-5" data-target="#myModal" data-toggle="modal" data-height="290"
                       data-width="504" href="/static/ajax/user-add.html" style="text-decoration:none"><i class="icon-edit"></i></a>
                    <a title="删除" href="javascript:;" style="text-decoration:none" class="ml-5 delBtn">
                        <i class="icon-trash"></i></a>
                </td>
            </tr>
            <tr>
                <td><input type="checkbox" value="1" name=""></td>
                <td>许其亮</td>
                <td>北京</td>
                <td>中南海</td>
                <td>62</td>
                <td>2013/03/25</td>
                <td>￥250,800</td>
                <td><a title="编辑" modal-title="编辑" class="ml-5" data-target="#myModal" data-toggle="modal" data-height="290"
                       data-width="504" href="/static/ajax/user-add.html" style="text-decoration:none"><i class="icon-edit"></i></a>
                    <a title="删除" href="javascript:;" style="text-decoration:none" class="ml-5 delBtn">
                        <i class="icon-trash"></i></a>
                </td>
            </tr>
            <tr>
                <td><input type="checkbox" value="1" name=""></td>
                <td>周 强</td>
                <td>北京</td>
                <td>中南海</td>
                <td>62</td>
                <td>2013/03/25</td>
                <td>￥230,800</td>
                <td><a title="编辑" modal-title="编辑" class="ml-5" data-target="#myModal" data-toggle="modal" data-height="290"
                       data-width="504" href="/static/ajax/user-add.html" style="text-decoration:none"><i class="icon-edit"></i></a>
                    <a title="删除" href="javascript:;" style="text-decoration:none" class="ml-5 delBtn">
                        <i class="icon-trash"></i></a>
                </td>
            </tr>
            <tr>
                <td><input type="checkbox" value="1" name=""></td>
                <td>曹建明</td>
                <td>北京</td>
                <td>中南海</td>
                <td>62</td>
                <td>2013/03/25</td>
                <td>￥220,800</td>
                <td><a title="编辑" modal-title="编辑" class="ml-5" data-target="#myModal" data-toggle="modal" data-height="290"
                       data-width="504" href="/static/ajax/user-add.html" style="text-decoration:none"><i class="icon-edit"></i></a>
                    <a title="删除" href="javascript:;" style="text-decoration:none" class="ml-5 delBtn">
                        <i class="icon-trash"></i></a>
                </td>
            </tr>
            </tbody>
        </table>
        <script>
            /*全选*/
            $(function () {
                $("#example thead th input:checkbox").on("click", function () {
                    var that = this;
                    $(this).closest("table").find("tr > td:first-child input:checkbox").each(function () {
                        this.checked = that.checked;
                        $(this).closest("tr").toggleClass("selected");
                    });
                });
                $(".paginate_button").on("click", function () {
                    $("#example tr").removeClass("selected");
                    $("#example input:checkbox").prop("checked", false);
                });
            });
        </script>
    </div>
    <script>
        $(function () {
            $(".delBtn").click(function () {
                user_del(this, '1');
            });
        });
    </script>
    <div id="myModal" class="modal hide fade " tabindex="-1"
         role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-header">
            <span class="glyphicon glyphicon-fullscreen"></span>
            <span class="close" data-dismiss="modal" aria-hidden="true"><i class="glyphicon glyphicon-remove "></i></span>

            <h3>对话框标题</h3>
        </div>
        <div class="modal-body  ">
            <div class="clear"><p>对话框内容…</p></div>
            <div class="clear"></div>
        </div>
        <div class="modal-footer ">
            <button class="btn radius btn-primary " data-submit="modal">
                确定
            </button>
            <button class="btn radius " data-dismiss="modal" aria-hidden="true">
                关闭
            </button>
        </div>
    </div>
    <script type="text/javascript">
        <!--
        $(function () {
            $("#myModal").on("close", function (e) {
                $(this).modal('hide');
            })
        });
        //-->
    </script>
</div>

<p>
    Datatable调用服务端版： </p>
<div class="dataTablebox ">
    <div class="tinydatatable" style="posititon:relative">
        <div class="form-inline tableheadnav">
            <a class="btn btn-primary btn-sm">月数据</a> <a class="btn btn-primary btn-sm">日数据</a>
        </div>
        <table id="example2" class="table display " width="100%" cellspacing="0">
            <thead>
            <tr>
                <th class="unsortable"><input type="checkbox" name="allck" value=""></th>
                <th>名称</th>
                <th class="unsortable">城市</th>
                <th>办公室</th>
                <th>年龄</th>
                <th>就职日期</th>
                <th class="sortCol">薪资</th>
                <th class="unsortable">操作</th>
            </tr>
            </thead>
        </table>
        <script>
            /*全选*/
            $(function () {
                $("#example2 thead th input:checkbox").on("click", function () {
                    var that = this;
                    $(this).closest("table").find("tr > td:first-child input:checkbox").each(function () {
                        this.checked = that.checked;
                        $(this).closest("tr").toggleClass("selected");
                    });
                });
                $(".paginate_button").on("click", function () {
                    $("#example2 tr").removeClass("selected");
                    $("#example2 input:checkbox").prop("checked", false);
                });
            });
        </script>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        var sortColumn = 1;
        $('#example2 th').each(function (index) {
            if ($(this).hasClass("sortCol")) {
                sortColumn = index;
                return false;
            }
        });
        $('#example2').dataTable({
            //"bSort":false,
            "bFilter": false,
            "serverSide": true,
            "ajax": "/static/data/datatable.page",
            "bLengthChange": true,
            "order": [[sortColumn, "desc"]],
            "aLengthMenu": [[5, 10, 25, 50, 100, -1], ["5条", "10条", "25条", "50条", "100条", "全部项"]],
            //"iDisplayLength":5
            "aoColumnDefs": [
                {"bSortable": false, "aTargets": "unsortable"},
                /*{"aTargets":[0],"mRender":function(data,type,full){ return '<input type="checkbox" id="" />' }},
                 {"aTargets":[2],"mRender":function(data,type,full){
                 if(data=='2'){
                 return "维护";
                 }else{
                 return "运行";
                 }
                 }
                 },
                 }*/
            ],
            "fnDrawCallback": function () {
                $("input[name=allck]").prop("checked", false);
            }
        });
        $("#example2").on("click", ".delBtn", function () {
            user_del(this, '1');
        });
    });
</script>
<div id="myModal" class="modal hide fade " tabindex="-1"
     role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <span class="glyphicon glyphicon-fullscreen"></span>
        <span class="close" data-dismiss="modal" aria-hidden="true"><i class="glyphicon glyphicon-remove "></i></span>

        <h3>对话框标题</h3>
    </div>
    <div class="modal-body  ">
        <div class="clear"><p>对话框内容…</p></div>
        <div class="clear"></div>
    </div>
    <div class="modal-footer ">
        <button class="btn radius btn-primary " data-submit="modal">
            确定
        </button>
        <button class="btn radius " data-dismiss="modal" aria-hidden="true">
            关闭
        </button>
    </div>
</div>
<script type="text/javascript">
    <!--
    $(function () {
        $("#myModal").on("close", function (e) {
            $(this).modal('hide');
        })
    });
    //-->
</script>


<p>
    后台返回代码（）即传回JSON： </p>

<h3>
    组件包 </h3>
<pre class="prettyprint linenums"><span
        class="Huialert-danger">10 DataTables数据表格组件依赖org.tinygroup.table和org.tinygroup.dataTables包</span></pre>

<h2>
    tinytable </h2>
<form id="tinytbl1957741729form" action="" method="get" class="form form-inline">
    <div class="well well-sm">
        用户名: <input type="text" name="username" value="" class="form-control  input-sm" size="10" class="input-sm"/>
        城市: <input type="text" name="city" value="" class="form-control  input-sm" size="10" class="input-sm"/>

        <div class="btn-group">
            <input type="submit" class="btn btn-primary btn-sm" value="搜索"/>
            <input type="reset" class="btn  btn-sm" value="重置"/>
            <button class="btn btn-primary btn-sm" id="qid-1811763938">保存</button>
            <button class="btn btn-sm no-padding no-border" style="margin-left:20px" onclick="return false">
                <select id="qid-1811763938-sel" class="form-control no-border-radius margin-bottom-0" style="height:31px"></select>
            </button>
            <script type="text/javascript">
                $(function () {
                    var form = $("#qid-1811763938").closest("form");
                    var qF = form.queryFor("#qid-1811763938-sel");
                    $("#qid-1811763938-sel").on("change", function () {
                        var v = $(this).val();
                        if (v == "none") return false;
                        var fItem, formItems = qF.getVal(v).split("&");
                        for (var i = 0, l = formItems.length; i < l; i++) {
                            fItem = formItems[i].split("=");
                            form.find("[name='" + decodeURIComponent(fItem[0]) + "']").eq(0).val(decodeURIComponent(fItem[1])).trigger("change");
                        }
                        form.trigger("submit");
                    });
                    $("#qid-1811763938").on("click", function () {
                        layer.prompt({title: '请输入保存名称', formType: 2}, function (text) {
                            var v = form.serialize();
                            qF.add(text, v);
                            layer.closeAll();
                        });
                        return false;
                    });
                    $("#qid-1811763938-btn-remove").on("click", function () {
                        qF.delete($("#qid-1811763938-sel").val());
                        return false;
                    })
                })
            </script>
            <button class="btn btn-sm" id="qid-1811763938-btn-remove"><i class="fa fa-remove"></i></button>
        </div>

    </div>
</form>
<script type="text/javascript">
    <!--
    $(function () {
        $("#tinytbl1957741729form").on("submit", function () {
            $("#tinytbl1957741729").trigger("initnav");
            return false;
        });
    });
    //-->
</script>
<div class=" tinyheaderTools form-inline">
    <input type="hidden" name="pagesize" id="tinytbl1957741729pageSize" value="10">
    <span id="delall-tinytbl1957741729"><a href="javascript:;" class="btn btn-danger btn-sm">批量删除</a></span>
    <script type="text/javascript">
        $(function () {
            $("#delall-tinytbl1957741729").on("click", function () {
                var checklist = [];
                $("#tinytbl1957741729>tbody>tr>td input[type=checkbox]:checked").each(function (e) {
                    checklist.push($(this).val());
                });
                if (checklist.length == 0) {
                    layer.msg("请选择记录")
                    return false;
                }
                layer.confirm("请确认?", function () {
                    $.ajax({
                        url: "/static/data/action.pagelet",
                        data: {ids: checklist.join(","), itemId: checklist, action: "delall", ddd: "eee", name: "test"},
                        dataType: "json",
                        success: function (data) {
                            if (data.status == "success" || data.status == "y") {
                                if (data.url) {
                                    var url = data.url;
                                    if (url.indexOf("http://") == -1) {
                                        url = contextPath + url;
                                    }
                                    window.location.href = url;
                                } else {
                                    layer.msg(data.info, 2, 1);
                                    $("#tinytbl1957741729").trigger("initnav");
                                }
                            } else {
                                layer.msg(data.info);
                            }
                        },
                        traditional: true,
                        error: function () {
                            layer.msg("系统出错，请确认你的请求地址");
                        }
                    })
                });
                //return false;
            })
        });
    </script>
    <a href="#" class="btn btn-default btn-sm">产品</a>
    <a href="#" class="btn btn-success btn-sm">Bug</a>
    <a href="#" class="btn btn-primary btn-sm">工程</a>
    <a href="#" class="btn btn-info btn-sm">历史</a>
    <a href="#" class="btn btn-warning btn-sm">相关</a>
    <a href="#" class="btn btn-warning btn-sm">相关</a>
</div>
<div class="clear"></div>
<div class="table-responsive">
    <table class="dataTable tinytable table table-hover" id="tinytbl1957741729" data-url="/static/data/tinytabledata.pagelet"
           data-url-real="/static/data/tinytabledata.pagelet">
        <thead>
        <tr>
            <th>
                <div style=";white-space: nowrap;margin-right:5px;"><input type="checkbox" name="allck" value=""></div>
            </th>
            <th rel="sortname" class="sorting sorting_desc">
                <div style=";white-space: nowrap;margin-right:5px;">姓名</div>
            </th>
            <th rel="sortname" class="">
                <div style=";white-space: nowrap;margin-right:5px;">城市</div>
            </th>
            <th rel="sortname" class="">
                <div style=";white-space: nowrap;margin-right:5px;">办公室</div>
            </th>
            <th rel="sortname" style="color:#f00" class="sorting">
                <div style="color:#f00;white-space: nowrap;margin-right:5px;">年龄</div>
            </th>
            <th rel="sortname" class="sorting">
                <div style=";white-space: nowrap;margin-right:5px;">就职日期</div>
            </th>
            <th rel="sortname" class="sorting">
                <div style=";white-space: nowrap;margin-right:5px;">薪资</div>
            </th>
            <th>
                <div style=";white-space: nowrap;margin-right:5px;">操作</div>
            </th>
        </tr>
        </thead>
        <tbody id="tinytbl1957741729-Body">
        </tbody>
    </table>
</div>
<div class="tinytableNav">
    <div class="pagination-sm r" id="tinytbl1957741729-nav"></div>
    显示 <span id="tinytbl1957741729-currentItemInfo"></span> 总共有 <span id="tinytbl1957741729-allnum"></span> 条目 <span
        id="tinytbl1957741729-msgInfo"></span>
</div>
<script type="text/javascript">
    $(function () {
        $("#tinytbl1957741729").on("initnav refresh init", function () {//currentPage
            var url = $('#tinytbl1957741729').attr("data-url");
            $("#tinytbl1957741729pageSize").attr("name", "");
            if ($("#tinytbl1957741729form").size() > 0) {
                var url = url + (url.indexOf("?") > 0 ? "&" : "?") + $("#tinytbl1957741729form").formSerialize();
            }
            $('#tinytbl1957741729').attr("data-url-real", url);
            getInfo(1, 1);
        });
        $("#tinytbl1957741729").on("change:url", function (e, url) {
            $(this).attr("data-url", url);
        });
        function getInfo(page, initnav) {
            var order;
            var ordertype;
            var pageSize = $("#tinytbl1957741729pageSize").val();
            if (!pageSize) pageSize = 10;
            if ($("#tinytbl1957741729 th.sorting_desc").size() > 0) {
                order = $("#tinytbl1957741729 th.sorting_desc").eq(0).attr("rel");
                ordertype = "desc";
            } else if ($("#tinytbl1957741729 th.sorting_asc").size() > 0) {
                order = $("#tinytbl1957741729 th.sorting_asc").eq(0).attr("rel");
                ordertype = "asc";
            }
            $.ajax({
                type: "GET",
                url: $('#tinytbl1957741729').attr("data-url-real"),
                data: {
                    page: page,
                    pagesize: pageSize,
                    pageSize: pageSize,
                    order: order,
                    ordertype: ordertype,
                    orderType: ordertype,
                    limit: pageSize,
                    start: (page - 1) * pageSize,
                    tinytableid: "tinytbl1957741729"
                },
                dataType: "html",
                cache: false,
                success: function (a) {
                    var $tpl = $("<div></div>").html(a);
                    var msgInfo = $tpl.children("div.tb-msg-box").html();
                    $("#tinytbl1957741729-msgInfo").html(msgInfo);
                    var nums = $tpl.children("input[name=records]").val();
                    $("#tinytbl1957741729>tbody").remove();
                    var firstTagName = $tpl.children(":first").get(0).tagName.toLowerCase();
                    if (firstTagName == "meta" || firstTagName == "html" || firstTagName == "body") {
                        a = "<div style='text-align:center'>系统错误</div>";
                    }
                    if (!nums && firstTagName != "<tr>") {
                        $('#tinytbl1957741729-nav').parent().hide();
                        $("#tinytbl1957741729").append("<tbody><tr><td colspan='20'>" + a + "</td><tr></tbody>");
                    } else {
                        $('#tinytbl1957741729-nav').parent().show();
                        $("#tinytbl1957741729").append("<tbody>" + a + "</tbody>");
                    }
                    if (initnav != undefined) {
                        $('#tinytbl1957741729').attr("data-num", nums);
                        $("#tinytbl1957741729-allnum").html($('#tinytbl1957741729').attr("data-num"));
                        setPageList(nums, pageSize, page)
                    }
                    var pageMaxNum = page * pageSize;
                    if (page * pageSize > parseInt($('#tinytbl1957741729').attr("data-num"))) {
                        pageMaxNum = $('#tinytbl1957741729').attr("data-num");
                    }
                    var pageMinNum = (page - 1) * pageSize + 1;
                    if (nums == 0) {
                        pageMinNum = pageMaxNum = 0;
                    }
                    $("#tinytbl1957741729-currentItemInfo").html(pageMinNum + "-" + pageMaxNum);
                }
            });
        }

        function setPageList(nums, pageSize, currentPage) {
            var showcontent = false;
            $('#tinytbl1957741729-nav').html("<div></div>");
            if (nums == 0) return false;
            if (!currentPage) currentPage = 1;
            var totalPages = Math.ceil(nums / pageSize);
            $('#tinytbl1957741729-nav div').twbsPagination({
                totalPages: totalPages,
                visiblePages: totalPages > 7 ? 7 : totalPages,
                startPage: currentPage,
                onPageClick: function (event, page) {
                    if (!showcontent) {
                        showcontent = true;
                        return;
                    }
                    getInfo(page);
                },
                hrefVariable: "pagenum",
                version: '1.1'
            });
        }

        $("#tinytbl1957741729").trigger("initnav");
        $("#tinytbl1957741729pageSize").on("change", function () {
            $("#tinytbl1957741729").trigger("initnav");
        });
        $("#tinytbl1957741729").on("click", "th.sorting", function () {
            var hasdesc = false;
            if ($(this).hasClass("sorting_desc")) {
                hasdesc = true;
            }
            $("#tinytbl1957741729 th").removeClass("sorting_desc sorting_asc");
            if (hasdesc) {
                $(this).addClass("sorting_asc");
            } else {
                $(this).addClass("sorting_desc");
            }
            $("#tinytbl1957741729").trigger("initnav");
        });
    });
</script>
<script type="text/javascript">
    $(function () {
        $("#tinytbl1957741729 th input:checkbox").on("click", function () {
            var that = this;
            $(this).closest("table").find("tr > td:first-child input:checkbox").each(function () {
                if (this.disabled) {
                    return;
                }
                this.checked = that.checked;
            });
        });
        $("#tinytbl1957741729").on("click", ".Item-Remove", function () {
            var that = this;
            layer.confirm('确定要删除该记录？', function (index) {
                $.ajax({
                    url: $(that).attr("data-url"),
                    data: {id: $(that).attr("data-id")},
                    dataType: "json",
                    success: function (data) {
                        if (data.status == "success" || data.status == "y") {
                            layer.msg(data.info, 2, 1);
                            setTimeout(function () {
                                layer.closeAll();
                                $("#tinytbl1957741729").trigger("refresh");
                            }, 300);
                        } else {
                            var msg = data.info ? data.info : "系统出错";
                            layer.msg(msg);
                        }
                    },
                    error: function () {
                        layer.msg("系统出错");
                    }
                });

            });
        }).on("click", ">tbody>tr>td", function (e) {
            if ($(this).find("a,input,button").size() == 0) {
                $(this).parent().find("input[type=checkbox]").trigger("click");
            }
        });
    });
</script>

<script type="text/javascript">
    $(function () {
        var form = $("#tinytbl1957741729form");
        var qF = form.queryFor("#thisform-selsql");
        $("#thisform-selsql").on("change", function () {
            var v = $(this).val();
            if (v == "none") return false;
            //call("link","/data/tinytabledata.pagelet")+
            //window.location.href="?"+qF.getVal(v);
            // console.log(qF.getVal(v));
        });
        $("input[name=savebutton]").on("click", function () {
            layer.prompt({title: '请输入保存名称', formType: 2}, function (text) {
                var v = form.serialize();
                qF.add(text, v);
                layer.closeAll();
            });
        });
    })
</script>
<a id="myModal" class="hide" data-target="#myModalModal" data-toggle="modal" modal-title="增加">
</a>
<div id="myModalModal" class="modal hide fade " tabindex="-1"
     role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <span class="glyphicon glyphicon-fullscreen"></span>
        <span class="close" data-dismiss="modal" aria-hidden="true"><i class="glyphicon glyphicon-remove "></i></span>

        <h3>增加</h3>
    </div>
    <div class="modal-body  ">
        <div class="clear"></div>
        <div class="clear"></div>
    </div>
    <div class="modal-footer ">
        <button class="btn radius btn-primary ModalSubmitButton" data-submit="modal">
            确定
        </button>
        <button class="btn radius " data-dismiss="modal" aria-hidden="true">
            关闭
        </button>
    </div>
</div>
<script type="text/javascript">
    <!--
    $(function () {
        $("#myModalModal").on("close", function (e) {
            $(this).modal('hide');
        })
    });
    //-->
</script>
<script type="text/javascript">
    <!--
    $(function () {
        $("button.ModalSubmitButton").off("click").on("click", function () {
            var thisform = $("#myModalModal form");
            if (thisform.size()) {
                thisform.submit();
            }
        });
    });
    //-->
</script>


<h2>
    分组表格 </h2>
<table class="table tinytable table table-hover" id="group-Table">
    <thead>
    <tr>
        <th>
            <div style=";white-space: nowrap;margin-right:5px;"></div>
        </th>
        <th>
            <div style=";white-space: nowrap;margin-right:5px;">姓名</div>
        </th>
        <th>
            <div style=";white-space: nowrap;margin-right:5px;">城市</div>
        </th>
        <th>
            <div style=";white-space: nowrap;margin-right:5px;">办公室</div>
        </th>
        <th>
            <div style=";white-space: nowrap;margin-right:5px;">年龄</div>
        </th>
        <th>
            <div style=";white-space: nowrap;margin-right:5px;">就职日期</div>
        </th>
        <th>
            <div style=";white-space: nowrap;margin-right:5px;">薪资</div>
        </th>
        <th>
            <div style=";white-space: nowrap;margin-right:5px;">操作</div>
        </th>
    </tr>
    </thead>
    <tbody>
    <tr class="show-group" data-tr="data-g-1">
        <td><span class="icon-chevron-right"></span></td>
        <td>刘云山1</td>
        <td>北京</td>
        <td>中南海</td>
        <td>71</td>
        <td>2013/03/25</td>
        <td class="sorting_1">￥300,800</td>
        <td><a title="编辑" modal-title="编辑" class="ml-5" data-target="#myModalModal" data-toggle="modal" data-height="290"
               data-width="504" href="/static/ajax/user-add.html" style="text-decoration:none"><i class="icon-edit"></i></a> <a
                href="javascript:;" class="Item-Remove" data-url="/static/ajax/del.html" data-id="1"><i class="icon-remove"></i></a>
        </td>
    </tr>
    <tr class="data-g-1 hide">
        <td></td>
        <td>刘云山1</td>
        <td>北京2</td>
        <td>中南海1</td>
        <td>71</td>
        <td>2013/03/25</td>
        <td
                class="sorting_1">￥300,800
        </td>
        <td>222
        </td>
    </tr>
    <tr class="data-g-1 hide">
        <td></td>
        <td>刘云山1</td>
        <td>北京2</td>
        <td>中南海1</td>
        <td>71</td>
        <td>2013/03/25</td>
        <td
                class="sorting_1">￥300,800
        </td>
        <td>222
        </td>
    </tr>
    <tr class="data-g-1 hide">
        <td></td>
        <td>刘云山1</td>
        <td>北京2</td>
        <td>中南海1</td>
        <td>71</td>
        <td>2013/03/25</td>
        <td
                class="sorting_1">￥300,800
        </td>
        <td>222
        </td>
    </tr>
    <tr class="data-g-1 hide">
        <td></td>
        <td>刘云山1</td>
        <td>北京2</td>
        <td>中南海1</td>
        <td>71</td>
        <td>2013/03/25</td>
        <td
                class="sorting_1">￥300,800
        </td>
        <td>222
        </td>
    </tr>

    <tr class="show-group" data-tr="data-g-2">
        <td><span class="icon-chevron-right"></span></td>
        <td>刘云山2</td>
        <td>北京</td>
        <td>中南海</td>
        <td>71</td>
        <td>2013/03/25</td>
        <td class="sorting_1">￥300,800</td>
        <td><a title="编辑" modal-title="编辑" class="ml-5" data-target="#myModalModal" data-toggle="modal" data-height="290"
               data-width="504" href="/static/ajax/user-add.html" style="text-decoration:none"><i class="icon-edit"></i></a> <a
                href="javascript:;" class="Item-Remove" data-url="/static/ajax/del.html" data-id="2"><i class="icon-remove"></i></a>
        </td>
    </tr>
    <tr class="data-g-2 hide">
        <td></td>
        <td>刘云山2</td>
        <td>北京2</td>
        <td>中南海1</td>
        <td>71</td>
        <td>2013/03/25</td>
        <td
                class="sorting_1">￥300,800
        </td>
        <td>222
        </td>
    </tr>
    <tr class="data-g-2 hide">
        <td></td>
        <td>刘云山2</td>
        <td>北京2</td>
        <td>中南海1</td>
        <td>71</td>
        <td>2013/03/25</td>
        <td
                class="sorting_1">￥300,800
        </td>
        <td>222
        </td>
    </tr>
    <tr class="data-g-2 hide">
        <td></td>
        <td>刘云山2</td>
        <td>北京2</td>
        <td>中南海1</td>
        <td>71</td>
        <td>2013/03/25</td>
        <td
                class="sorting_1">￥300,800
        </td>
        <td>222
        </td>
    </tr>
    <tr class="data-g-2 hide">
        <td></td>
        <td>刘云山2</td>
        <td>北京2</td>
        <td>中南海1</td>
        <td>71</td>
        <td>2013/03/25</td>
        <td
                class="sorting_1">￥300,800
        </td>
        <td>222
        </td>
    </tr>

    <tr class="show-group" data-tr="data-g-3">
        <td><span class="icon-chevron-right"></span></td>
        <td>刘云山3</td>
        <td>北京</td>
        <td>中南海</td>
        <td>71</td>
        <td>2013/03/25</td>
        <td class="sorting_1">￥300,800</td>
        <td><a title="编辑" modal-title="编辑" class="ml-5" data-target="#myModalModal" data-toggle="modal" data-height="290"
               data-width="504" href="/static/ajax/user-add.html" style="text-decoration:none"><i class="icon-edit"></i></a> <a
                href="javascript:;" class="Item-Remove" data-url="/static/ajax/del.html" data-id="3"><i class="icon-remove"></i></a>
        </td>
    </tr>
    <tr class="data-g-3 hide">
        <td></td>
        <td>刘云山3</td>
        <td>北京2</td>
        <td>中南海1</td>
        <td>71</td>
        <td>2013/03/25</td>
        <td
                class="sorting_1">￥300,800
        </td>
        <td>222
        </td>
    </tr>
    <tr class="data-g-3 hide">
        <td></td>
        <td>刘云山3</td>
        <td>北京2</td>
        <td>中南海1</td>
        <td>71</td>
        <td>2013/03/25</td>
        <td
                class="sorting_1">￥300,800
        </td>
        <td>222
        </td>
    </tr>
    <tr class="data-g-3 hide">
        <td></td>
        <td>刘云山3</td>
        <td>北京2</td>
        <td>中南海1</td>
        <td>71</td>
        <td>2013/03/25</td>
        <td
                class="sorting_1">￥300,800
        </td>
        <td>222
        </td>
    </tr>
    <tr class="data-g-3 hide">
        <td></td>
        <td>刘云山3</td>
        <td>北京2</td>
        <td>中南海1</td>
        <td>71</td>
        <td>2013/03/25</td>
        <td
                class="sorting_1">￥300,800
        </td>
        <td>222
        </td>
    </tr>
    </tbody>
</table>

<script>
    $(function () {
        $("#group-Table").off("click", ">tbody>tr>td").on("click", ".show-group", function (e) {
            $(this).find(".glyphicon").toggleClass("glyphicon-chevron-right glyphicon-chevron-down");
            $("#group-Table>tbody").children("tr." + $(this).attr("data-tr")).toggle();
        });
    })
</script>


<pre class="prettyprint linenums"><span class="Huialert-danger">以上组件依赖org.tinygroup.table包即可</span></pre>

<h2>
    添加行内容 </h2>
<div class="codeView bs-docs-example ">
    <table class="table itemlist-table "
            >
        <thead>
        <tr>
            <th class="text-c w-50px">编号</th>
            <th>文件</th>
            <th>标题</th>
            <th class="w-125px">操作</th>
        </tr>
        </thead>

        <tbody class="databody">
        <tr>
            <td class="text-c stepID">1</td>
            <td class="w-p50">				<span class="form-inline">
<span class="btn-upload">
	<input id="fid977662593_input" name="file-1_name" value="" type="text" class="form-control">
	<a class="btn btn-primary" role="button"><i class="glyphicon glyphicon-cloud-upload"></i> 浏览文件</a>
	<input type="file" id="fid977662593" name="file-1" class="input-file">
</span></span>
                <script type="text/javascript">
                    $(function () {
                        $("#fid977662593").on("change", function () {
                            $(this).prev("input").val($(this).val())
                            //$("#fid977662593_input").val($(this).val());
                        });
                    })
                </script>
            </td>
            <td><input type="text" name="username" value="" class="form-control  form-control" placeholder="标题" class="form-control"/>
            </td>
            <td class="w-p125"><a title="之前添加" modal-title="之前添加" class="btn btn-small btn-default addpre" data-target=""
                                  data-toggle="modal" data-height="" data-width="" style="text-decoration:none"><i
                    class="icon-arrow-up"></i></a>
                <a title="之后添加" modal-title="之后添加" class="btn btn-small btn-default addnext" data-target="" data-toggle="modal"
                   data-height="" data-width="" style="text-decoration:none"><i class="icon-arrow-down"></i></a>
                <a title="删除" modal-title="删除" class="btn btn-small btn-default delbutton" data-target="" data-toggle="modal"
                   data-height="" data-width="" style="text-decoration:none"><i class="icon-remove"></i></a>
            </td>
        </tr>
        </tbody>
    </table>
    <script>
        $(function () {
            function updateStepID() {
                $('.itemlist-table>.databody .stepID').each(function (index) {
                    $(this).html(index + 1);
                });
            }

            $(".itemlist-table").on("click", ".addpre", function () {
                var $thisTr = $(this).closest("tr");
                var $tpl = $thisTr.clone();
                $tpl.find("input,select").val("");
                $thisTr.before($tpl);
                updateStepID();
            }).on("click", ".addnext", function () {
                var $thisTr = $(this).closest("tr");
                var $tpl = $thisTr.clone();
                $tpl.find("input,select").val("");
                $thisTr.after($tpl);
                updateStepID();
            }).on("click", ".delbutton", function () {
                if ($('.databody .stepID').size() == 1) return;
                var that = this;
                layer.confirm('确定删除?', function () {
                    $(that).closest("tr").remove();
                    updateStepID();
                    layer.msg('删除成功！', 2, 1)
                })
            });
        });
    </script>
</div>
<pre class="prettyprint linenums"><span class="Huialert-danger">以上组件依赖org.tinygroup.table和org.tinygroup.form包即可</span></pre>


<h2>
    fooTable表格 </h2>
<div class="codeView bs-docs-example ">
    <table class="table footable toggle-arrow-tiny" data-page-size="8">
        <thead>
        <tr>
            <th data-toggle="true">
                产品
            </th>
            <th>
                姓名
            </th>
            <th>
                电话
            </th>
            <th>
                邮箱
            </th>
            <th data-hide="all">
                公司
            </th>
            <th data-hide="all">
                部门
            </th>
            <th data-hide="all">
                参数
            </th>
            <th data-hide="all">
                采购数量
            </th>
            <th data-hide="all">
                日期
            </th>
            <th>
                操作
            </th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>
                Tiny模板引擎之2015工具介绍
            </td>
            <td>
                李鹏
            </td>
            <td>
                18816846785
            </td>
            <td>
                76358600@qq.com
            </td>
            <td>
                杭州××××有限公司
            </td>
            <td>
                技术研发部
            </td>
            <td>
                0.52/1.561
            </td>
            <td>
                1600
            </td>
            <td>
                2015-09-16
            </td>
            <td>
                <a href="#"><i class="fa fa-check"></i>
                    通过</a></td>
        </tr>
        <tr>
            <td>
                Tiny框架功能概要
            </td>
            <td>
                李瑞环
            </td>
            <td>
                18216846785
            </td>
            <td>
                76358600@qq.com
            </td>
            <td>
                杭州××××有限公司
            </td>
            <td>
                技术研发部
            </td>
            <td>
                0.52/1.561
            </td>
            <td>
                1200
            </td>
            <td>
                2015-09-15
            </td>
            <td>
                <a href="#"><i class="fa fa-check"></i>
                    通过</a></td>
        </tr>
        <tr>
            <td>
                快速搭建Tiny开发项目
            </td>
            <td>
                李长春
            </td>
            <td>
                18616846685
            </td>
            <td>
                76358600@qq.com
            </td>
            <td>
                杭州××××有限公司
            </td>
            <td>
                技术研发部
            </td>
            <td>
                0.52/1.561
            </td>
            <td>
                1000
            </td>
            <td>
                2015-09-14
            </td>
            <td>
                <a href="#"><i class="fa fa-check"></i>
                    通过</a></td>
        </tr>
        <tr>
            <td>
                Tiny框架设计原则
            </td>
            <td>
                李克强
            </td>
            <td>
                18258812685
            </td>
            <td>
                76358600@qq.com
            </td>
            <td>
                杭州××××有限公司
            </td>
            <td>
                技术研发部
            </td>
            <td>
                0.32/1.661
            </td>
            <td>
                800
            </td>
            <td>
                2015-09-13
            </td>
            <td>
                <a href="#"><i class="fa fa-check"></i>
                    通过</a></td>
        </tr>
        <tr>
            <td>
                Tiny框架设计理念
            </td>
            <td>
                李源潮
            </td>
            <td>
                18258812768
            </td>
            <td>
                76358600@qq.com
            </td>
            <td>
                杭州××××有限公司
            </td>
            <td>
                技术研发部
            </td>
            <td>
                0.62/1.861
            </td>
            <td>
                600
            </td>
            <td>
                2015-09-12
            </td>
            <td>
                <a href="#"><i class="fa fa-check"></i>
                    通过</a></td>
        </tr>
        <tr>
            <td>
                Tiny模板引擎之2015工具介绍
            </td>
            <td>
                李岚清
            </td>
            <td>
                18816846785
            </td>
            <td>
                76358600@qq.com
            </td>
            <td>
                杭州××××有限公司
            </td>
            <td>
                技术研发部
            </td>
            <td>
                0.52/1.561
            </td>
            <td>
                1600
            </td>
            <td>
                2015-09-16
            </td>
            <td>
                <a href="#"><i class="fa fa-check"></i>
                    通过</a></td>
        </tr>
        <tr>
            <td>
                Tiny框架功能概要
            </td>
            <td>
                李继耐
            </td>
            <td>
                18216846785
            </td>
            <td>
                76358600@qq.com
            </td>
            <td>
                杭州××××有限公司
            </td>
            <td>
                技术研发部
            </td>
            <td>
                0.52/1.561
            </td>
            <td>
                1200
            </td>
            <td>
                2015-09-15
            </td>
            <td>
                <a href="#"><i class="fa fa-check"></i>
                    通过</a></td>
        </tr>
        <tr>
            <td>
                快速搭建Tiny开发项目
            </td>
            <td>
                李铁映
            </td>
            <td>
                18616846685
            </td>
            <td>
                76358600@qq.com
            </td>
            <td>
                杭州××××有限公司
            </td>
            <td>
                技术研发部
            </td>
            <td>
                0.52/1.561
            </td>
            <td>
                1000
            </td>
            <td>
                2015-09-14
            </td>
            <td>
                <a href="#"><i class="fa fa-check"></i>
                    通过</a></td>
        </tr>
        <tr>
            <td>
                Tiny框架设计原则
            </td>
            <td>
                李克强
            </td>
            <td>
                18258812685
            </td>
            <td>
                76358600@qq.com
            </td>
            <td>
                杭州××××有限公司
            </td>
            <td>
                技术研发部
            </td>
            <td>
                0.32/1.661
            </td>
            <td>
                800
            </td>
            <td>
                2015-09-13
            </td>
            <td>
                <a href="#"><i class="fa fa-check"></i>
                    通过</a></td>
        </tr>
        </tbody>
        <tfoot>
        <tr>
            <td colspan="5">
                <ul class="pagination pull-right"></ul>
            </td>
        </tr>
        </tfoot>
    </table>
    <!-- 全局js -->
    <script>
        $(document).ready(function () {
            $('.footable').footable();
        });
    </script>
</div>
<pre class="prettyprint linenums"><span class="Huialert-danger">fooTable组件依赖org.tinygroup.table和org.tinygroup.fooTable 包即可</span></pre>
